<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2 id='title' class="h2-title">标题</h2>
    <button id='anniu'>按钮</button>
    <div><input type="password">
        <button id='xianshi'>显示</button></div>
    <script>
        //根据id获取
        var h2=document.getElementById('title');
        //根据标签名获取
        var h2bytagname=document.getElementsByTagName('h2');
        //根据类名
        var h2byclass=document.getElementsByClassName('h2-title');
        //根据选择器
        var h2byid=document.querySelector('#title');//用类选择器一般加个all
        //获取特殊元素
        //body
        var bodydom=document.body;
        //获取html元素
        var htmldom=document.documentElement;
        //创建事件的两种方式
        var button=document.querySelector('#anniu');
        // button.onclick=function(){
        //     alert('111');
        // }
        // button.addEventListener('click',function(){
        //     alert('111');
        // })
        //改变元素内容
        var button1 = document.querySelector('#anniu');
        button1.onclick=function(){
            var h2el = document.querySelector('h2')
            //h2el.innerText = '改变标题';
            h2el.innerHTML = "<a href=''>改变标题</a>";//能改变标签
        }
        //修改表单属性
        var button2= document.querySelector('#xianshi');
        var i=0;
        button2.onclick=function(){
            var input= document.querySelector('input');
            var typee=new Array;
            typee[0]='password';
            typee[1]='text'
            i++;
            i=i%2;
            input.type=typee[i];
        }
    </script>
</body>
</html>